<p>This rule raises an issue when multiple consecutive calls are made to <code>Array#push()</code>, <code>Element#classList.add()</code>,
<code>Element#classList.remove()</code>, or <code>importScripts()</code> on the same object.</p>
<h2>Why is this an issue?</h2>
<p>Making multiple consecutive calls to methods that accept multiple arguments creates unnecessary overhead and reduces code readability.</p>
<p>Methods like <code>Array#push()</code>, <code>Element#classList.add()</code>, <code>Element#classList.remove()</code>, and
<code>importScripts()</code> are designed to accept multiple arguments in a single call. When you make multiple separate calls instead of one combined
call, you create several issues:</p>
<ul>
  <li> <strong>Performance overhead</strong>: Each method call has a small performance cost. Multiple calls mean multiple function invocations,
  parameter processing, and potential DOM updates (for classList methods). </li>
  <li> <strong>Reduced readability</strong>: Multiple lines doing similar operations make the code longer and harder to scan quickly. </li>
  <li> <strong>Inconsistent patterns</strong>: Using single calls when multiple arguments are supported goes against the intended API design. </li>
</ul>
<p>For example, calling <code>array.push(1); array.push(2);</code> requires two separate function calls, while <code>array.push(1, 2)</code>
accomplishes the same result with one call. Similarly, <code>element.classList.add('foo'); element.classList.add('bar');</code> triggers two DOM
updates, while <code>element.classList.add('foo', 'bar')</code> can be optimized by the browser into a single update.</p>
<h3>What is the potential impact?</h3>
<p>The impact is primarily on code maintainability and minor performance improvements. While the performance gain from combining calls is usually
small, it can be noticeable in performance-critical code or when dealing with many DOM manipulations. The main benefit is improved code readability
and consistency with JavaScript API best practices.</p>
<h3>How to fix?</h3>
<p>Combine multiple consecutive <code>Array#push()</code> calls into a single call with multiple arguments.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
const items = [];
items.push(1); // Noncompliant
items.push(2, 3); // Noncompliant
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="1" data-diff-type="compliant">
const items = [];
items.push(1, 2, 3);
</pre>
<h3>How to fix in Web Workers?</h3>
<p>Combine multiple consecutive <code>importScripts()</code> calls into a single call.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="2" data-diff-type="noncompliant">
importScripts('https://example.com/lib1.js'); // Noncompliant
importScripts('https://example.com/lib2.js'); // Noncompliant
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="2" data-diff-type="compliant">
importScripts(
  'https://example.com/lib1.js',
  'https://example.com/lib2.js'
);
</pre>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/sindresorhus/eslint-plugin-unicorn#readme">eslint-plugin-unicorn</a> - Rule <a
  href="https://github.com/sindresorhus/eslint-plugin-unicorn/blob/HEAD/docs/rules/prefer-single-call.md">prefer-single-call</a> </li>
  <li> Array.prototype.push() - MDN - <a
  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push">Documentation for the Array push method that
  accepts multiple arguments</a> </li>
  <li> Element.classList - MDN - <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList">Documentation for the classList API
  including add() and remove() methods</a> </li>
  <li> WorkerGlobalScope.importScripts() - MDN - <a
  href="https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts">Documentation for the importScripts method in Web
  Workers</a> </li>
</ul>
